<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 遍历数组 -->
			<div>
				<!-- person,index 顺序不能乱，命名可以自定义，person 表示当前遍历到的元素，index 表示其在数组中的索引 -->
				<!-- :key 为 v-bind:key 的简写，目的是给每一个 li 标签加上一个唯一标识，不能重复 -->
				<li v-for="(person,index) in persons" :key="index">
					{{person.name}} - {{person.age}}
				</li>
			</div>
			<!-- 遍历对象 -->
			<div>
				<!-- val, key 顺序不能乱，命名可以自定义，val 为当前遍历到的属性的值，key 表示该属性的名称 -->
				<ul v-for="(val, key) of car" :key="key">
					<li>{{ key }} -- {{ val }}</li>
				</ul>
			</div>
			<!-- 遍历字符串 -->
			<div>
				<!-- ch, index 顺序不能乱，命名可以自定义，ch 表示当前遍历到的 字符,index 表示该字符在字符串中的索引 -->
				<ul v-for="(ch, index) of msg" :key="index">
					<li>{{ index }} -- {{ ch }}</li>
				</ul>
			</div>
			<!-- 遍历指定次数 -->
			<div>
				<!-- 相当于循环展示 5个 ul ；num, index顺序不能乱，命名可自定义；
				num 表示第几次，分别是 1 2 3 4 5，
				index为 num对应的索引，从0开始，即 0 1 2 3 4 -->
				<ul v-for="(num, index) in 5" :key="index">
					<li>{{ index }} -- {{ num }}</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					persons: [{
							id: '001',
							name: '张三',
							age: 18
						},
						{
							id: '002',
							name: '李四',
							age: 19
						},
						{
							id: '003',
							name: '王五',
							age: 20
						}
					],
					car: {
						name: '奥迪a8',
						price: '70w',
						color: '黑色'
					},
					msg: "Hello World!"
				}
			})
		</script>
	</body>
</html>